<template>
    <div class="comment">
      <div class="weui-cell" v-if="type!=2">
        <operate iszan="true" isshare="true" iscomts="true" :type="isz?'1':'2'" :info="comment"></operate>
      </div>
      <div class="ads" v-if="comment.ad_thumb">
        <a :href="'../other/main?id='+comment.user.id">
            <img :src="comment.ad_thumb" alt="" mode="aspectFill">
        </a>
      </div>
       <div class="commentTitle" v-if="type!=2">评论区 <img src="/static/images/jtDown.png" alt="" class="jtDowwn" > </div>
       <ul>
            <li class="commentList" v-for="(itemCom,idx) in listCom" :key="idx">
                <div class="originator weui-cell" >
                    <div class="weui-cell__hd">
                         <avatar :avatar="itemCom.user.avatar" :Level="itemCom.user.partner_level" :userId="itemCom.user.id" :isAuth="itemCom.user.is_auth" :isPartner="itemCom.user.is_partner"></avatar>
                    </div>
                    <div class="weui-cell__bd">
                        <div class="nickname">{{itemCom.user.nickname}}</div>
                    </div>
                    <div class="weui-cell__ft">
                        <report></report>
                    </div>
                </div>
                <div class="content">
                    <p>{{itemCom.content}}</p>
                    <div class="weui-cell time"> 
                        <div class="weui-cell__bd"><span style="font-size:12px;padding-right:15px;">{{itemCom.created_at}}</span> <van-tag @click="toreply(itemCom)">回复</van-tag></div> 
                        <div class="weui-cell__ft" @click="tolike(itemCom)" style="padding-left:5px">
                          <img src="/static/images/zanCon.png" alt="" v-if="itemCom.is_zan==1" class="zanCon">
                          <img src="/static/images/zanCon1.png" alt="" v-else class="zanCon">
                        </div> 
                        <div class="weui-cell__ft">{{itemCom.zan}}</div> 
                    </div>  
                    <div class="pls" v-if="itemCom.sub.length>0">
                        <div class="weui-cell plsItem" v-for="(itemSub,idex) in itemCom.sub" :key="idex">
                            <div class="weui-cell__hd">{{itemSub.user.nickname}}:</div>
                            <div class="weui-cell__bd">{{itemSub.content}}</div>
                        </div>
                    </div>    
                </div>
            </li>
        </ul>
        <div class="queS" v-if="listCom.length==0">
           <img :src="img+'/que/no_conten@2x.png'"/>
        </div>
        <div class="kong"></div>
        <div class="PLfooter weui-cell">
            <div class="weui-cell__bd">
                <van-button  open-type="getUserInfo"  @getuserinfo="bindGetUserInfo($event,1)" >
                  <div class="input">写评论...</div>
                </van-button>
            </div>
            <div class="weui-cell__ft operate" >
                 <van-button  open-type="getUserInfo"  @getuserinfo="bindGetUserInfo($event,2)">
                   <van-icon name="like" size="20px" color="#FF3F3F" v-if="comment.is_zan"/> 
                   <van-icon name="like-o" size="20px" v-else color="#666"/> 
                 </van-button>
            </div>
            <div class="weui-cell__ft operate">
                 <van-button  open-type="getUserInfo"  @getuserinfo="bindGetUserInfo($event,3)">
                    <van-icon name="star" size="20px" color="#1A84FB" v-if="comment.is_collect"/> 
                    <van-icon name="star-o" size="20px" color="#666" v-else/> 
                 </van-button>
            </div>
            <div class="weui-cell__ft operate">
                <van-button  open-type="share">
                    <van-icon name="share" size="20px" color="#666"/> 
                </van-button>
            </div>
        </div>
       
    </div> 
</template> 

<script>
import report from "@/components/report";
import operate from "@/components/operate";
import avatar from "@/components/avatar";

import {like} from "@/api/operate.js"
import {zanComment} from "@/api/operate.js"
import {collectA} from "@/api/operate.js"
import { xdLogin } from "@/utils/login"
var currentpage=1;
export default {
  props: ["comment", "type","role","listCom"],
  components: {
    report,
    operate,
    avatar
  },
  data(){
    return{
       role:"",
       list:[],
       load:false,
       queS:false,
       img: this.$URL.imgurl,
    } 
  },
  methods: {
    tocomment() {
      delete this.comment.content;
      let comment=JSON.stringify(this.comment)
      let url = "../writeComment/main?info="+comment+"&type=1";
      mpvue.navigateTo({ url });
    },
    
    toreply(info){
        let comment=JSON.stringify(info)
        let url = "../writeComment/main?info="+comment+"&type=2&actType="+this.comment.article_type;
        mpvue.navigateTo({ url });
    },
    //点赞评论
    tolike(info){
        let data={};
        data.id=info.id
        data.type=this.comment.article_type;
        console.log(data)
        zanComment(data).then(res=>{
          if(res.code==200){
             let msg=res.msg
             if(info.is_zan==0){ 
                info.zan=parseInt(info.zan)+1  
                info.is_zan=1;
                 wx.showToast({
                    title: "点赞成功",
                    icon: 'none',
                });
            }else{
                info.zan=parseInt(info.zan)-1 
                info.is_zan=0;
                 wx.showToast({
                    title: "取消点赞",
                    icon: 'none',
                });
            }
             
          }else if(res.code==201){
            let msg=res.msg
              wx.showToast({
                  title: msg,
                  icon: 'none',
              });
          }
        }) 
    },
    tocollect(info){
      let data={};
          data.id=info.id
          data.type=info.article_type;
          
          collectA(data).then(res=>{
              let msg=res.msg
              wx.showToast({
                  title: msg,
                  icon: 'none',
                  success: (result) => {
                      info.is_collect=!(info.is_collect)

                      // this.$emit("like",{info})
                  },
                  fail: () => {},
                  complete: () => {}
              });
          }) 
    },
    likeA(info){
        let data={};
        data.id=info.id
        data.type=info.article_type;
        like(data).then(res=>{
            let msg=res.msg
            wx.showToast({
                title: msg,
                icon: 'none',
                success: (result) => {
                    if(info.is_zan==0){ 
                        info.zans=parseInt(info.zans)+1  
                        info.is_zan=1
                    }else{
                        info.zans=parseInt(info.zans)-1 
                        info.is_zan=0
                    }

                    // this.$emit("like",{info})
                },
                fail: () => {},
                complete: () => {}
            });
        }) 
    },
    bindGetUserInfo(e,type){
        wx.getStorage({
          key: 'token',
          success: (result) => {
             if(type==1){
                this.tocomment()
             }else if(type==2){
                this.likeA(this.comment)
             }else if(type==3){
                this.tocollect(this.comment)
             }
                
          },
          fail: () => {
              xdLogin(e).then((res)=>{

              })
          },
          complete: () => {}
        });
    }
  },
  onReady(){
    
  },
  onUnload(){
      console.log("我已经离开了！");
      this.info={}
      this.list=[]
      currentpage=0
      let newObject={}
      Object.assign(this.comment,newObject)
      console.log(this.comment)
  }
};
</script>
<style>
.comment .operate {
  text-align: center;
}
</style>
<style lang="scss">

.comment {
  
  .ads{
      width:345px;
      height:115px;
      border-radius:5px;
      display: block;
      margin: 0 auto;
      img{
        width:345px;
        height:115px;
        border-radius:5px;
        display: block;
      }
    }
  .PLfooter {
    width: 375px;
    height: 49px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 1);
    border-top: 1px solid #ddd;
    ._van-icon {
      margin-left: 24px;
      margin-top:5px;
    }
    .grayShare {
      width: 15px;
      height: 15px;
    }
    .input {
      width: 210px;
      height: 34px;
      background: rgba(240, 240, 240, 1);
      border-radius: 17px;
      padding: 0 15px;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 500;
      color: rgba(26, 132, 251, 1);
      line-height: 18px;
      line-height: 34px;
      text-align:left;
    }
    .van-button {
      background-color: transparent !important;
      height: auto !important;
      line-height: 1.5 !important;
      padding: 0 !important;
    }
    .button-hover {
      background-color: transparent;
    }
    .van-button--default {
      border: none !important;
    }
    button {
      background-color: transparent !important;
      height: auto !important;
      line-height: 1.5 !important;
      padding: 0 !important;
    }
  }
  .commentTitle {
    padding: 10px 0;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    line-height: 18px;
    position: relative;
    width: 375px;
    .jtDowwn{
      width: 20px;
      height: 20px;
      vertical-align:middle;
    }
    &::after {
      position: absolute;
      content: "";
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 150px;
      height: 1px;
      background: rgba(221, 221, 221, 1);
    }
    &::before {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 150px;
      height: 1px;
      background: rgba(221, 221, 221, 1);
    }
  }
  .commentList {
    padding-bottom: 15px;
    position: relative;
    .originator {
      padding-bottom: 0;
    }
    .content {
      font-size: 14px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 18px;
      padding-left: 70px;
      padding-right: 15px;
    }
    .time {
      padding-left: 0;
      .zanCon{
        width: 16px;
        height: 16px;
      }
    }
    .pls {
      background: rgba(243, 243, 243, 1);
      border-radius: 3px;
      font-size: 12px;
      font-weight: 500;
      line-height: 18px;
      color: #333333;
      .plsItem {
        padding: 5px 10px;
        -webkit-box-align:start;
        -webkit-align-items:start;
        align-items:start;
        .weui-cell__hd {
          color: rgba(26, 132, 251, 1);
        }
      }
    }
  }
  .kong {
    height: 49px;
  }
  .commentList::after {
    position: absolute;
    left: 54px;
    right: 15px;
    border-bottom: 1px solid #ddd;
    content: "";
    bottom: 0;
  }
  .queS{
    width:417rpx;
    height:324rpx;
    display:block;
    margin:50px auto;
    img{
      width:417rpx;
      height:324rpx;
    }
  }
}
</style>
